<template>
	<div>
		<input style="text-align: center;" disabled=true @click="showPicker=true" :value="showValue" :placeholder="placeholder" />
		<div class="mpvue-picker" v-if="showPicker">
			<div class="pickerMask" catchtouchmove="true"></div>
			<div class="mpvue-picker-content mpvue-picker-view-show">
				<div class="mpvue-picker__hd" catchtouchmove="true">
					<div class="mpvue-picker__action" @click="showPicker=false">取消</div>
					<div class="mpvue-picker__action" @click="pickerConfirm">确定</div>
				</div>
				<picker-view class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
					<block>
						<picker-view-column>
							<div class="picker-item" v-for="(item,index) in dataList1" :key="index">{{item.name}}</div>
						</picker-view-column>
						<picker-view-column v-if="dataList2.length > 0">
							<div class="picker-item" v-for="(item,index) in dataList2" :key="index">{{item.name}}</div>
						</picker-view-column>
						<picker-view-column v-if="dataList3.length > 0">
							<div class="picker-item" v-for="(item,index) in dataList3" :key="index">{{item.name}}</div>
						</picker-view-column>
					</block>
				</picker-view>
			</div>
		</div>
	</div>
</template>

<script>
	var Datas = []
	export default {
		props: {
			value: Number,
			placeholder: {
				type: String,
				default: ''
			},
			json: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showPicker: false,
				showValue: '',
				pickerIndex: [0,0,0],
				pickerValue: [],
				dataList1: [],
				dataList2: [],
				dataList3: []
			}
		},
		watch: {
			value (value) {
				console.log(value)
				this.showValue = this.value
			}
		},
		mounted() {
			this.loadJson()
		},
		methods: {
			async loadJson() {
				Datas = await this.$api('GET', 'json', {
					url: this.json
				})
				this.load1()
			},
			load1() {
				this.dataList1 = []
				Datas.forEach((item) => {
					this.dataList1.push({
						id: item.id,
						code: item.code,
						name: item.name
					})
				})
				this.load2(0)
			},
			load2(k) {
				this.dataList2 = []
				Datas[k].children.forEach((item) => {
					this.dataList2.push({
						id: item.id,
						code: item.code,
						name: item.name
					})
				})
				this.load3(k, 0)
			},
			load3(k, kk) {
				this.dataList3 = []
				Datas[k].children[kk].children.forEach((item) => {
					this.dataList3.push({
						id: item.id,
						code: item.code,
						name: item.name
					})
				})
			},
			loadByFid(fid) {
				let data = []
				for (let n = 0; n < Datas.length; n++) {
					if (Datas[n].fid == fid) {
						data.push(Datas[n])
					}
				}
				return data
			},
			pickerConfirm() {
				this.showValue = this.dataList1[this.pickerIndex[0]].name + ' - ' + this.dataList2[this.pickerIndex[1]].name +
					' - ' + this.dataList3[this.pickerIndex[2]].name
				this.showPicker = false
				this.$emit('input', this.dataList3[this.pickerIndex[2]].id)
			},
			pickerChange(e) {
				let indexs = e.detail.value
				if (this.pickerValue[0] != this.dataList1[indexs[0]].id) {
					// 第一级发生滚动
					this.load2(indexs[0])
					this.load3(indexs[0], indexs[1])
				} else if (this.pickerValue[1] != this.dataList2[indexs[1]].id) {
					// 第二级滚动
					this.load3(indexs[0], indexs[1])
				}
				this.pickerIndex = indexs
			}
		}
	};
</script>

<style>
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: rgba(255, 255, 255, 1);
	}
</style>
